<template>
  <div class="chat-container">
    <div class="sidebar">
      <Sidebar />
    </div>
    <div class="chat-main">
      <ChatHeader v-if="currentChat" />
      <MessageList v-if="currentChat" />
      <MessageInput v-if="currentChat" />
      <div v-else class="welcome-message">
        <h2>欢迎使用AgChat聊天</h2>
        <p>请选择一个聊天或开始新的对话</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useChatStore } from '@/stores/chat'
import Sidebar from '@/components/Chat/Sidebar.vue'
import ChatHeader from '@/components/Chat/ChatHeader.vue'
import MessageList from '@/components/Chat/MessageList.vue'
import MessageInput from '@/components/Chat/MessageInput.vue'

const chatStore = useChatStore()
const currentChat = computed(() => chatStore.currentChat)
</script>

<style scoped>
.chat-container {
  display: flex;
  height: 100vh;
  background-color: white;
}

.sidebar {
  width: 300px;
  border-right: 1px solid #e0e0e0;
}

.chat-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.welcome-message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #999;
}

.welcome-message h2 {
  margin-bottom: 1rem;
}
</style>